<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      function checkDarkMode() {
        const query = "(prefers-color-scheme: dark)"

        /**
         * @param {MediaQueryListEvent} e
         */
        const onChange = (e) => {
          if (e.matches) {
            document.documentElement.classList.add("dark")
          } else {
            document.documentElement.classList.remove("dark")
          }
        }

        const mql = window.matchMedia(query)
        onChange(mql)
        mql.addEventListener("change", onChange)
      }

      checkDarkMode()
    </script>
  </head>

  <body>
    <div id="root"></div>
    <div id="modal-container"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
